<template>
	<view class="content">

		<view class="img-box">
			<view class="img-item">
				<image :src="content.p1_image" mode="widthFix" class="img"></image>
			</view>
			<view class="img-item">
				<image :src="content.p2_image" mode="widthFix" class="img"></image>
			</view>
			<view class="img-item">
				<image :src="content.p3_image" mode="widthFix" class="img"></image>
			</view>
			
			
			
		</view>
		<view class="rich-box">
			<rich-text :nodes="content.content"></rich-text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: {}
			}
		},
		onShow() {
			this.activityDetail()
		},
		methods: {

			async activityDetail() {
				let res = await this.$api.activityDetail({
					"id": 4
				});
				this.content = res.data
			},
		}
	}
</script>

<style>
	.img-box {
		display: flex;
		overflow-x: scroll;
	}
	
	.img{
		width: 540rpx;
	}
	
	.rich-box{
		padding-top: 20rpx;
		font-size: 28rpx;
	}
	
	.content{
		padding: 20rpx;
	}
	
	.img-item{
		margin-right: 20rpx;
	}
</style>